<template>
  <basic-container>
    <avue-crud ref="crud"
               :option="option"
               v-model:page="page"
               :table-loading="loading"
               @on-load="onLoad"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @refresh-change="refreshChange"
               @search-reset="searchChange"
               @search-change="searchChange"
               :before-open="beforeOpen"
               v-model="form"
               :data="data">
      <template #mid-form="scope">
        <el-tree
            ref="treeRef"
            :data="menuList"
            show-checkbox
            node-key="id"
            :props="{  children: 'children',label: 'title'}"
        />
      </template>
    </avue-crud>
  </basic-container>
</template>

<script >
import {getRoleList, addRole, updateRole, deleteRole} from "/@/api/systemRole"
import {onMounted, reactive, ref, toRefs} from "vue";
import useCurrentInstance from "/@/utils/useCurrentInstance";
import {getMenus} from "../../api/system";
import {getContainerQr} from "../../api/base/container";
export default {
  name: "systemRole",

  setup(props){
    const { proxy } = useCurrentInstance();

    const option = ref({
      searchMenuSpan: 6,
      tip: false,
      border: true,
      index: false,
      viewBtn: false,
      selection: true,
      addBtn:true,
      searchLabelWidth:100,
      excelBtn:false,
      labelWidth:100,
      column: [
        {
          label: '角色编号',
          prop: "code",search:true,
          width: 150,
          rules: [{
            required: true,
            message: '请输入角色编号',
            trigger: 'blur'
          }]
        },
        {
          label: '角色名称',
          prop: "title",search:true,
          width: 150,
          rules: [{
            required: true,
            message: '请输入角色名称',
            trigger: 'blur'
          }]
        },

        {
          label: '主菜单',
          prop: "menuNameList",display: false,
          render: function ({row}) {
            return row.menuNameList.join(",");
          }
        },
        {
          label: '主菜单',
          prop: "mid", hide: true,
        },

      ]
    });
    const loading = ref(true);
    const data = ref([]);
    const crud = ref();
    const treeRef = ref();
    const selectionList = ref([]);
    const menuList = ref([]);
    const queryParams = ref({});
    const form = ref({});
    const page = ref({
      pageSize: 10,
      currentPage: 1,
      total: 0

    })
    const onLoad = (pages, params = {}) => {
      loading.value = true;
      getRoleList(Object.assign({ page: pages.currentPage,
        limit: pages.pageSize,},params, queryParams.value)).then(res => {
        const resData =  res.data;
        page.value.total = resData.total;
        data.value = resData.list;
        loading.value = false;
        selectionClear();
      })
    }
    const selectionClear = () => {
      selectionList.value = [];
    }
    const rowSave = (row, done, loading) => {
      let checkedKeys = treeRef.value.getCheckedKeys(false);
      console.log(checkedKeys)
      if (!Array.isArray(checkedKeys) || checkedKeys.length == 0){
        proxy.$message({
          type: "error",
          message: "请选择菜单!"
        });
        loading();
        return;
      }
      row.mid = checkedKeys;
      addRole(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowUpdate = (row, index, done, loading) => {
      updateRole(row).then(() => {
        done();
        onLoad(page.value);
        proxy.$message({
          type: "success",
          message: "操作成功!"
        });
      }, error => {
        window.console.log(error);
        loading();
      });
    }
    const rowDel = (row) => {
      proxy.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            return deleteRole(row);
          })
          .then(() => {
            onLoad(page.value);
            proxy.$message({
              type: "success",
              message: "操作成功!"
            });
          });
    }
    const refreshChange = () => {
      onLoad(page.value, queryParams.value);
    }
    const searchChange = (params, done) => {
      page.currentPage = 1;
      onLoad(page.value, params);
      done();
    }
    onMounted(() => {
      getMenuList()
    })
    const getMenuList = () => {
      getMenus().then(res => {
        menuList.value = res.data || []
      })
    }
    const beforeOpen = (done, type) => {
      if (["edit", "view"].includes(type)) {
        done();
        setTimeout(() => {
          treeRef.value.setCheckedKeys(form.value.mid, false)
        }, 0);
      }else {
        done()
      }

    }
    return {
      option,
      loading,
      data,
      page,
      form,
      queryParams,
      menuList,
      treeRef,
      onLoad,
      rowSave,
      rowUpdate,
      rowDel,
      refreshChange,
      searchChange,
      beforeOpen
    }
  }
}
</script>
